import { useState } from "react";
import Dialog from "@/components/Dialog";
import "@/pages/p1/index.css";
import dialogImage from "@/assets/p1/dialog_background_red.png";
import backgroundImage from "@/assets/p1/scenes/dormitory.png";
import roommateImage from "@/assets/p1/characters/roommate.png";
import protagonistImage from "@/assets/p1/characters/protagonist-right.png";

const chatScript = [
	"老师这次留的古代数学课题我实在是弄不明白。",
	"去找一下古代数学著作的资料会不会好一点？",
	"你说的也是，正好有本《九章算术》，我看看。",
	"晚上，你钻研着《九章算术》，希望能够从中获得答案，突然你感觉一阵头晕，等你再睁眼时……",
];

const Index = () => {
	const [dialog, setDialog] = useState(false);
	return (
		<div
			className="chatPageBackground"
			style={{ backgroundImage: `url(${backgroundImage})` }}
			onClick={() => {
				setDialog(true);
			}}
		>
			{dialog && (
				<Dialog
					backgroundImage={dialogImage}
					dialogues={chatScript}
					nextPage={"/p1/FieldChapterScene"}
					dialogueImages={[
						{ leftImage: protagonistImage },
						{ rightImage: roommateImage },
						{ leftImage: protagonistImage },
					]}
				/>
			)}
		</div>
	);
};

export default Index;
